import React, { memo } from "react";
import XJDTopBanner from "./c-cpns/top-banner"
import XJDHotRecommend from "./c-cpns/hot-recommend"
import XJDNewAlbum from './c-cpns/new-album';
import XJDRecommendRanking from './c-cpns/recommend-ranking';
import XJDUserLogin from './c-cpns/user-login';
import XJDSettleSinger from './c-cpns/settle-singer';
import XJDHotAnchor from './c-cpns/hot-anchor';
import{
  RecommendWrapper,
  Content,
  RecommendLeft,
  RecommendRight
} from "./style"
function XJDRecommend(props) {

  return (
    <RecommendWrapper>
      <XJDTopBanner/>
      <Content className="wrap-v2">
        <RecommendLeft>
        <XJDHotRecommend/>
        <XJDNewAlbum/>
        <XJDRecommendRanking/>
        </RecommendLeft>
       <RecommendRight>
          <XJDUserLogin/>
          <XJDSettleSinger/>
          <XJDHotAnchor/>
       </RecommendRight>

      </Content>
    </RecommendWrapper>
  );
}

export default memo(XJDRecommend);













// function XJDRecommend(props) {
//   //模拟didMount这个生命周期
//   const { getBanners, topBanners } = props;
//   useEffect(() => {
//     getBanners();
//   }, [getBanners]);

//   return (
//     <div>
//       <h2>XJDRecommend:{topBanners.length}</h2>
//     </div>
//   );
// }

// const mapStateToProps = (state) => ({
//   topBanners: state.recommend.topBanners,
// });

// const mapDispatchToProps = (dispatch) => ({
//   getBanners: () => {
//     dispatch(getTopBannerAction());
//   },
// });
// export default connect(mapStateToProps, mapDispatchToProps)(memo(XJDRecommend));
